// @ts-ignore
// import { CSSModule } from '@vaadin/flow-frontend/css-utils';
import '@vaadin/vaadin-board/vaadin-board.js';
import '@vaadin/vaadin-charts/vaadin-chart.js';
import '@vaadin/vaadin-lumo-styles/badge.js';
import '@vaadin/vaadin-lumo-styles/all-imports.js';
import {css, customElement, html, LitElement} from 'lit-element';

@customElement('dashboard-view')
export class DashboardView extends LitElement {
    static get styles() {
        return [
            /*CSSModule('shared-styles'),
            CSSModule('lumo-badge'),
            CSSModule('lumo-typography'),*/
            css`
        :host {
          background-color: var(--lumo-contrast-10pct);
          box-sizing: border-box;
          display: block;
          font-size: var(--lumo-font-size-m);
          height: 100%;
          overflow: auto;
          padding: var(--lumo-space-m) var(--lumo-space-l);
        }

        vaadin-board {
          margin: 0 auto;
          max-width: 1024px;
        }

      .badge_color{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 0.4em calc(0.5em + var(--lumo-border-radius-s) / 4);
        color: var(--lumo-primary-text-color);
        background-color: var(--lumo-primary-color-10pct);
        border-radius: var(--lumo-border-radius-s);
        font-family: var(--lumo-font-family);
        font-size: var(--lumo-font-size-s);
        line-height: 1;
        font-weight: 500;
        text-transform: initial;
        letter-spacing: initial;
        min-width: calc(var(--lumo-line-height-xs) * 1em + 0.45em);
       }
        
       .badge_success{
        color: var(--lumo-success-text-color);
        background-color: var(--lumo-success-color-10pct);
       }
        
       .badge_error{
        color: var(--lumo-error-text-color);
        background-color: var(--lumo-error-color-10pct);
       }
        
        /* Wrapper */
        .wrapper {
          display: flex;
          padding: var(--lumo-space-s);
        }

        /* Card */
        .card {
          align-items: baseline;
          background-color: var(--lumo-base-color);
          border-radius: var(--lumo-border-radius);
          box-shadow: var(--lumo-box-shadow-xs);
          display: flex;
          flex-direction: column;
          overflow: hidden;
          width: 100%;
        }

        .card h2 {
          margin-bottom: 0;
          margin-top: var(--lumo-space-m);
        }

        .card h3 {
          margin-bottom: var(--lumo-space-xs);
          margin-right: var(--lumo-space-m);
          margin-left: var(--lumo-space-m);
          margin-top: var(--lumo-space-m);
        }

        /* Spacing */
        .space-m {
          padding: var(--lumo-space-m);
        }

        /* Text colors */
        .error-text {
          color: var(--lumo-error-text-color);
        }

        .primary-text {
          color: var(--lumo-primary-text-color);
        }

        .secondary-text {
          color: var(--lumo-secondary-text-color);
        }

        .success-text {
          color: var(--lumo-success-text-color);
        }

        /* Charts */
        vaadin-chart {
          padding-top: var(--lumo-space-s);
        }

        /* Grid */
        vaadin-grid {
          height: 300px;
        }
      `,
        ];
    }

    render() {
        return html`
      <vaadin-board>
        <vaadin-board-row>
          <div class="wrapper">
            <div class="card space-m">
<!--              <span theme="badge">学生总数</span>-->
              <span class="badge_color">学生总数</span>
              <h2 class="primary-text" id="totalStu"></h2>
              <span class="secondary-text"></span>
            </div>
          </div>
          <div class="wrapper">
            <div class="card space-m">
<!--              <span theme="badge success">老师总数</span>-->
              <span class="badge_success">老师总数</span>
              <h2 class="success-text" id="totalTeacher"></h2>
              <span class="secondary-text"></span>
            </div>
          </div>
          <div class="wrapper">
            <div class="card space-m">
<!--              <span theme="badge error">课程总数</span>-->
              <span class="badge_error">课程总数</span>
              <h2 class="error-text" id="totalCourse"></h2>
              <span class="secondary-text"></span>
            </div>
          </div>
        </vaadin-board-row>
        <div class="wrapper">
          <div class="card">
            <vaadin-chart type="column" id="stuScore" title="学生成绩统计图"></vaadin-chart>
          </div>
        </div>
        <div class="wrapper">
            <div class="card">
              <vaadin-chart id="stuTotalScore" title="学生个人总成绩统计图"> </vaadin-chart>
            </div>
          </div>
      </vaadin-board>
    `;
    }
}
